<template>
	<view class="login_bg">
		<view class="" style="height: 286rpx;">
			
		</view>
		<image src="../static/login_font_icon.png" style="width: 352rpx;height: 66rpx;margin-left: 40rpx;"/>
		<view class="login_phone_pass_view" :style="{backgroundImage: login_type == 1 ? 'url(https://static.gongsizhang.com/2024-05-21-664cbe71714ec.png)' : 'url(https://static.gongsizhang.com/2024-05-21-664cbe7e11a2d.png)'}">
			<view class="" style="height: 20rpx;">
				
			</view>
			<view class="login_phone_pass_tip" >
				<view class="login_phone_pass_tip_text" @click="setLogin(1)">
					<view class="" style="height: 44rpx;">
						手机号登录
					</view>
					<image src="../static/eye_in.png" style="width: 39rpx;height: 15rpx;margin: 0 auto;" v-if="login_type == 1"/>
				</view>
				<view class="login_phone_pass_tip_text" @click="setLogin(2)">
					<view class="">
						账号密码登录
					</view>
					<image src="../static/eye_in.png" style="width: 39rpx;height: 15rpx;margin: 0 auto;" v-if="login_type == 2"/>
				</view>
			</view>
			<view class="input_login_view" v-if="login_type == 1">
				<view class="" style="height: 70rpx;">
					
				</view>
				<view class="login_user_name">
					<input type="text" placeholder="请输入手机号" v-model="phone">
				</view>
				<view class="" style="height: 60rpx;">
					
				</view>
				<view class="login_ver_code" style="display: flex;">
					<input type="text" placeholder="请输入验证码" style="flex: 1;" v-model="sms_code">
					<view class="login_ver_code_tip" @click="send_sms_code" :style="{color:secound != 60 ? '#CCC':'#1C75FF'}">
						{{str}}
					</view>
				</view>
			</view>
			
			<view class="input_login_view" v-if="login_type == 2">
				<view class="" style="height: 70rpx;">
					
				</view>
				<view class="login_user_name">
					<input type="text" placeholder="请输入手机号" v-model="phone">
				</view>
				<view class="" style="height: 60rpx;">
					
				</view>
				<view class="login_ver_code" style="display: flex;align-items: center;">
					<input type="password" placeholder="请输入密码" style="flex: 1; " v-if="!show_pass" v-model="password"/>
					<input type="text" placeholder="请输入密码" style="flex: 1; " v-if="show_pass"/>
					<image :src="show_pass ? '../static/hide_pass.png' : '../static/look_pass.png'" style="width: 40rpx;height: 17rpx;" @click="show_pass = !show_pass"/>
					<view class="" style="width: 20rpx;">
						
					</view>
				</view>
			</view>
			
			<view class="" style="height: 136rpx;"></view>
			<view class="login_phone_code" @click="login">
				{{login_type == 1 ? '登录/注册' : '登录'}}
			</view>
			<view class="login_tip_check">
				我已阅读并同意<font color="257AD4">《用户服务协议》《隐私协议》</font>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				login_type:1,
				show_pass:false,
				password:'',
				phone:'',
				sms_code:'',
				interVCal:'',
				secound:60,
				str:'发送验证码'
			}
		},
		onLoad() {
			this.getSysteminfo()
		},
		methods: {
			async send_sms_code(){
				if(this.secound != 60 || this.interVCal != ''){
					return;
				}
				this.$commonUtils.showLoading()
				let resultData = await this.$api.send_sms_code({
					data:{
						phone:this.phone
					}
				})
				this.$commonUtils.hideLoading()
				if(resultData['error_code'] != 0){
					this.$commonUtils.showErrorToast({
						title:resultData['error_message']
					})
					return;
				}
				this.secound -=1;
				let that = this
				that.str = that.secound+'秒重新发送';
				this.interVCal = setInterval(() => {
				        if (that.secound > 0) {
				          that.secound -= 1;
						  that.str = that.secound+'秒重新发送';
				        } else {
				          // 倒计时结束，清除interval
				          clearInterval(that.interVCal);
						  that.interVCal = ''
						  that.secound = 60
						  that.str = '发送验证码';
				        }
				      }, 1000);
				
			},
			async login(){
				let that = this
				let params = {
					'username':that.phone
				}
				if(that.login_type == 1){
					params['sms_code'] = that.sms_code
				}else if(that.login_type == 2){
					params['password'] = that.password;
				}
				this.$commonUtils.showLoading()
				let resultData = await this.$api.login({
					data:params
				});
				this.$commonUtils.hideLoading()
				if(resultData['error_code'] != 0){
					this.$commonUtils.showErrorToast({
						title:resultData['error_message']
					})
					return;
				}
				//设置本地存储，进行页面跳转
				this.$store.commit('setToken',resultData['data']['token'])
				this.$Router.switchTab({
					route:this.$path.content.home
				})
			},
			setLogin(type){
				if(type != this.login_type){
					this.login_type = type
				}
			},
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			}
		}
	}
</script>

<style>
	uni-image{
		display:inline-block;
	}
	image{
		display: block;
	}
	.login_tip_check{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #979797;
		text-align: left;
		font-style: normal;
		text-transform: none;
		text-align: center;
		margin-top: 24rpx;
	}
	.login_phone_code{
		width: 574rpx;
		height: 88rpx;
		background: #1C75FF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.08);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		text-align: center;
		line-height: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-shadow: 0px 2rpx 4rpx rgba(17,93,172,0.5);
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin: 0 auto;
	}
	.login_user_name{
		margin-left: 48rpx;
		margin-right: 48rpx;
		border-bottom: 1rpx solid #CCC;
		padding-bottom: 16rpx;
		padding-top: 16rpx;
	}
	.login_ver_code_tip{
		width: 200rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1C75FF;
		text-align: left;
		font-style: normal;
		text-transform: none;
		text-align: center;
	}
	.login_ver_code{
		margin-left: 48rpx;
		margin-right: 48rpx;
		border-bottom: 1rpx solid #CCC;
		padding-bottom: 16rpx;
		padding-top: 16rpx;
	}
	.input_login_view{
		
	}
	.login_phone_pass_tip{
		display: flex;
	}
	.login_phone_pass_tip_text{
		flex: 1;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #292929;
		font-style: normal;
		text-transform: no;
	}
	.login_bg{
		width: 750rpx;
		height: 100vh;
		background-image: url("https://static.gongsizhang.com/2024-05-21-664cbe9d0aebc.png");
		background-repeat: no-repeat;
		background-size: cover;
	}
	.login_phone_pass_view{
		width: 670rpx;
		height: 686rpx;
		background-repeat: no-repeat;
		background-size: cover;
		margin: 0 auto;
		margin-top: 114rpx;
	}
	
</style>